<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('邊角料庫存統計')"/>
    <th:block th:include="include :: layout-latest-css"/>
</head>
<body>
<div class="ui-layout-center">

    <div class="container-div">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="height: 400px"></div>
    </div>
    <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
    </div>

</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<script th:src="@{/js/echarts.js}" type="text/javascript"></script>
<script th:inline="javascript">


    var app = {};
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var num1 = [];
    var num2 = [];
    var materials = [];
    var prefix = ctx + "system/chart";
    $(function () {
        list();
    })

    function list() {
        $.ajax({
            url: prefix + "/stockStatistics",
            type: 'post',
            // async:false,
            // cache: false,
            // data: formData,
            // processData: false,
            // contentType: false,
            // dataType: "json",
            success: function (result) {
                // $.operate.ajaxSuccess(result);
                for (var i = 0; i < result.data.length; i++) {
                    num1.push(result.data[i].num1);
                    num2.push(result.data[i].num2);
                    materials.push(result.data[i].material);
                }
                showEchart();
                queryUserList();
                // alert(legendData.toString());
            }
        });
    }

    function queryUserList() {
        var options = {
            url: prefix + "/stockList",
            sortName: "material",
            sortOrder: "desc",
            modalName: "邊角料庫存統計",
            columns: [{
                checkbox: true
            },
                // {
                //     visible: false,
                //     field: 'tableId',
                //     title: '表序號'
                // },
                {
                    field: 'material',
                    title: '材質',
                    sortable: true
                },
                {
                    field: 'num1',
                    title: '收購總量',
                    // sortable: true
                },
                {
                    field: 'num2',
                    title: '已收購量'
                },
                {
                    field: 'num3',
                    title: '可收購量'
                },
            ]
        };
        $.table.init(options);
    }


    // echart 函數
    function showEchart() {

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                const labelOption = {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                };
                myChart.setOption({
                    series: [
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        }
                    ]
                });
            }
        };
        const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['收購總量', '已收購量']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: materials
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '收購總量',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: num1
                },
                {
                    name: '已收購量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: num2
                }
            ]
        };
        option && myChart.setOption(option);


    }


</script>
</body>
</html>